<template>
  <jb-crud-page ref="pageRef" searchUrl="/aiFunction/list" :conditions-align="'start'"
                :searchConditions="pageConditions" @afterSearch="handleAfterSearch" @afterRender="handleAfterRender">
    <template #conditions-form>
      <jb-input v-model:value="pageConditions.keywords" placeholder="请输入名称"/>
    </template>

    <template #default="{list,tableStartIndex}">
      <jb-table
          class="full-height-table"
          ref="tableRef"
          :row-config="{keyField: 'id', isHover: true}"
          :checkbox-config="{ trigger: 'row',checkRowKeys:props.selectList.map(item=>item.id) }"
          @checkbox-all="selectAllChangeEvent"
          @checkbox-change="selectChangeEvent"
          :data="list"
          :start-index="tableStartIndex"
      >
        <jb-column type="checkbox" width="60" fixed="left"></jb-column>
        <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
        <jb-column
            field="sn"
            title="编号"
            min-width="160"
            fixed="left"
        ></jb-column>
        <jb-column
            field="briefInfo"
            title="简介"
            min-width="160"
        ></jb-column>

        <!--                <jb-column title="操作" width="100" fixed="right">-->
        <!--                    <template #default="{ row }">-->
        <!--                        <jb-btn class="mx-8px" tip-text="删除资源" secondary circle type="error"-->
        <!--                                :icon="Icons.DELETE" :confirmText="'确认删除该资源？'"-->
        <!--                                :url="`/aiFunction/del/${row.id}`" @confirm="pageRef.loadData()"-->
        <!--                        ></jb-btn>-->
        <!--                    </template>-->
        <!--                </jb-column>-->
      </jb-table>
    </template>
  </jb-crud-page>
</template>

<script setup>
import {useResetableData} from "@/hooks/common/use-resetable-data.js";
import {onMounted, ref} from "vue";


const props = defineProps({
  selectList: Array
})
const pageRef = ref(null)

const tableRef = ref(null)
const selectList = ref([])
const pageConditions = useResetableData({
  keywords: '',
  enabled: true
})


// 单选事件处理
function selectChangeEvent({row, checked}) {
  if (checked) {
    // 添加项（去重）
    if (!selectList.value.some(item => item.id === row.id)) {
      selectList.value = [...selectList.value, row];

    }
  } else {
    // 移除项
    selectList.value = selectList.value.filter(item => item.id !== row.id);

  }

}

const selectAllChangeEvent = ({checked}) => {
  const $table = tableRef.value;
  if ($table) {
    const records = $table.getCheckboxRecords();
    if (checked) {
      // 全选时，将所有记录添加到 selectList 中，并��重
      const existingIds = new Set(selectList.value.map(item => item.id));
      const newRecords = records.filter(record => !existingIds.has(record.id));
      selectList.value = [...selectList.value, ...newRecords];
    } else {
      // 反选时，移除所有记录
      const recordIds = new Set(resultList.value.map(record => record.id));
      selectList.value = selectList.value.filter(item => !recordIds.has(item.id));
    }
  }
}

const resultList = ref([])

function handleAfterSearch(list) {
  resultList.value = list
}

function handleAfterRender(list) {
  const $table = tableRef.value
  if ($table) {
    $table.setCheckboxRow(selectList.value, true)
  }
}

const submit = async (callback) => {
  if (callback) {
    callback(selectList.value)
  }
}

defineExpose({
  submit
})


onMounted(() => {
  selectList.value = props.selectList;//父组件中的选中的列表

})


</script>


<style scoped lang="scss">
.left-content {
  display: flex;
  flex-direction: column;
  height: 100%;

}

.left-content:deep(.n-layout-scroll-container) {
  display: flex;
  flex-direction: column;
}


.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.full-height-table {
  flex: 1;
  height: 100%;
}

.full-height-table :deep(.vxe-table--main-wrapper) {
  height: 100%;
}

.full-height-table :deep(.vxe-table--body-wrapper) {
  height: 100% !important;
}

.footer {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--n-card-color);
  border-top: 1px solid var(--n-border-color);
  flex-shrink: 0;
}
</style>